<template>
    <section>
        <b-navbar>
            <template #brand>
                <b-navbar-item tag="router-link" :to="{ path: '/' }">
                    <img
                    src="/src/assets/buefy.png"
                    alt="Lightweight UI components for Vue.js based on Bulma"
                    />
                </b-navbar-item>
            </template>
            <template #start>
                <b-navbar-item href="#"> Home </b-navbar-item>
                <b-navbar-item href="#"> Documentation </b-navbar-item>
                <b-navbar-dropdown label="Info">
                    <b-navbar-item href="#"> About </b-navbar-item>
                    <b-navbar-item href="#"> Contact </b-navbar-item>
                </b-navbar-dropdown>
            </template>

            <template #end>
                <b-navbar-item tag="div">
                    <div class="buttons">
                        <a class="button is-primary">
                            <strong>Sign up</strong>
                        </a>
                        <a class="button is-light"> Log in </a>
                    </div>
                </b-navbar-item>
            </template>
        </b-navbar>
    </section>
</template>

<script setup lang="ts">
import { BNavbar, BNavbarDropdown, BNavbarItem } from "buefy";
</script>
